@import "../../../../styles";
.home_area_box{ background: $blue_body_radius; width: 100%; height: 100%; position: relative; overflow: hidden; overflow-y: auto}
$space:30px;
$chart_title_height:40px;
$chart_max_height:300px;
$chart_min_height:200px;
.home_area{ width: 1100px; margin: $space auto; }
.data_border{border: 1px solid $blue_normal; position: relative;}
.data_border >.inner{ position: absolute; width: 100%; height: 100%; overflow: hidden}
.data_border >.inner >.title{ background:$blue_header_dark; font-family: Times; font-size: 15px;  height: $chart_title_height; border-bottom: 1px solid $blue_normal; line-height: $chart_title_height; color:#fff; font-size: 14px;  }
.data_border >.inner >.title >.title_space{ margin-left: 20px;}
.data_border >.inner >.inner_body{ position: relative; height: $chart_min_height - $chart_title_height; width: 100%; overflow: hidden;}
.alarm_list{ height: $chart_max_height; @extend .data_border ; margin-bottom: $space;}
.alarm_list .alarm_list_body{ height: $chart_max_height - $chart_title_height; width: 100%; overflow: hidden; }
.alarm_list .alarm_list_body .item{ padding: 10px 0;border-bottom: 1px dashed $blue_normal; color: #fff; }
.alarm_list .alarm_list_body .item .id{ width: 20px; margin-left: 5px;}
.alarm_list .alarm_list_body .item .content{ width: 220px }
.alarm_list .alarm_list_body .item .handle{ width: 70px;}
.alarm_list .alarm_list_body .alarm_list_body_scroll{margin-right: -25px;height:100%;overflow:hidden;overflow-y: auto;}
.alarm_data{ height: $chart_min_height;@extend .data_border;}
.map_data{ height: $space + $chart_max_height + $chart_min_height;@extend .data_border;}
.pipeline_type,.pipeline_material,.pipeline_diameter,.alarm_type,.history_box{ height: $chart_min_height;@extend .data_border;}
.history_box{ margin-bottom:$space / 2 }

.sensor_data{ color: #fff; font-size: 12px; padding: 10px 20px; background: rgba(0,0,0,.7); margin-top: 20px; margin-right: 15px; float: right; width: 180px; border: 1px solid $blue_normal; position: relative;z-index: 10;}
.sensor_data_alarm{ border-color: $alarm_normal;}
.sensor_data_box{
    user-select: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;}
.sensor_data .status{ font-size: 13px;}
.sensor_data .status .normal{  color: $green_normal}
.sensor_data .status .abnormal{ font-size: 13px; color: $blue_normal}
.sensor_data .status .alarm{  color: $alarm_normal
}
.sensor_data .data img{ margin-right: 5px; height: 14px;}
.sensor_data .status .number{ position: relative; text-align: center;  margin-right: 5px; height: 30px; width: 20px; display: inline-block; background-size: contain;}
.sensor_data .status .number img{ left: 0; top: -1px;  width: 100%; position: absolute; z-index: -1;}
